<script setup lang="ts">

import {FieldType} from "@/constants"

interface FieldTypeTagProps {
  filedType: FieldType
}

const {
  filedType
} = defineProps<FieldTypeTagProps>();

interface Config {
  fieldType: FieldType
  color: string,
  textColor: string,
  borderColor: string
}

const configs: Config[] = [
  {
    fieldType: FieldType.STRING,
    color: '#CAEDB4',
    textColor: '#5B8483',
    borderColor: '#C6DFEA'
  },
  {
    fieldType: FieldType.BIG_DECIMAL,
    color: '#E2EFF5',
    textColor: '#5A8BA2',
    borderColor: '#EEE7F1'
  },
  {
    fieldType: FieldType.LONG,
    color: '#DFE3F5',
    textColor: '#A37286',
    borderColor: '#F3DDC3'
  },
  {
    fieldType: FieldType.INTEGER,
    color: '#DFE5DB',
    textColor: '#E7775B',
    borderColor: '#FCE7EB'
  },
  {
    fieldType: FieldType.BOOLEAN,
    color: '#FCE7EB',
    textColor: '#7F8285',
    borderColor: '#E3E2D1'
  },
  {
    fieldType: FieldType.DATE,
    color: '#DBF5F5',
    textColor: '#569230',
    borderColor: '#FADCDB'
  },
  {
    fieldType: FieldType.DATETIME,
    color: '#DEE6E6',
    textColor: '#7F8285',
    borderColor: '#E8F5F4'
  },
]

const currentConfig = computed(() => {
  return configs.find(config => config.fieldType == filedType)
})

console.log(currentConfig.value?.fieldType)
</script>

<template>
  <n-tag size="large" round>
    {{ currentConfig.value }}
  </n-tag>
</template>

<style scoped></style>
